<template>
	<div class="wrapper">
		<swiper v-if="showSwiper" :options="swiperOption" >
			<!-- slides -->
			<swiper-slide v-for="slide in list" :key="slide.id">
				<img class="swier-img" :src="slide.imgUrl" />
			</swiper-slide>

			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: "HomeSwiper",
		props: {
			list: Array
		},
		data() {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					},
					observer: true, //修改swiper自己或子元素时，自动初始化swiper 
					observeParents: true, //修改swiper的父元素时，自动初始化swiper 
					loop: true,
					autoplay: true, //可设置数值来指定播放速度
					initialSlide: 1
				},
			}
		},
		computed: {
			showSwiper() {
				return this.list.length;
			}
		},
		

	}
</script>

<!-- wrapper样式用于图片防抖动 -->
<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background :#fff !important
	.wrapper 
		overflow:hidden 
		width:100% 
		height :0 
		padding-bottom :31.25% 
		background :#eee 
		.swier-img 
			width :100%
</style>
